<template>
    <div class="resultboard">
        <div class="col-12" style="text-align:center;">
            <div class="result-board-text" v-if="$store.state.pk.loser === 'all'">
                平局
            </div>
            <div class="result-board-text" v-else-if="$store.state.pk.loser === 'A' && $store.state.pk.a_id === parseInt($store.state.user.id)">
                你输了！
            </div>
            <div class="result-board-text" v-else-if="$store.state.pk.loser === 'B' && $store.state.pk.b_id === parseInt($store.state.user.id)">
                你输了！
            </div>
            <div class="result-board-text" v-else>
                你赢了！
            </div>
            <button @click="restart" type="button" class="btn btn-warning">
                再来!
            </button>
        </div>
    </div>
</template>

<script>
import {useStore} from "vuex"

export default {
    setup(){
        const store = useStore();
        //console.log(store.state.pk.a_id,store.state.user.id); //类型不一样
        const restart =() =>{
            store.commit("updateStatus","matching");
            store.commit("updateLoser","none");
            store.commit("updateOpponent",{
                username:"我的对手",
                photo:"https://cdn.acwing.com/media/article/image/2022/08/09/1_1db2488f17-anonymous.png"
            })
        }
        return{
            restart
        }
    }
}
</script>

<style scoped>
.resultboard{
    
    width: 26%;
    height: 35%;
    background-color: rgba(50, 50, 50, 0.6);
     /* 层级高于画布，确保可见 */
    z-index: 10;
}
div.result-board-text{
    text-align: center;
    color: aliceblue;
    font-size: 50px;
    font-weight: 600;
    font-style: italic;
    margin-top: 6%;
}
button{
    margin-top: 20%;
}
</style>